<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jCaramel-core-1.0.js"></script>
<script type="text/javascript" src="js/jCaramel-listview-1.0.js"></script>
<link rel="stylesheet" type="text/css" href="css/jCaramel.css"/>
<link rel="stylesheet" type="text/css" href="css/icons.css"/>
<style>
	body{
		font-family:Arial, Helvetica, sans-serif;
		font-size:11pt;
		 margin:0;
		 padding:0;
		 overflow:hidden;
	}
	
	ul.main { position:absolute; top:35px; left:0; bottom:0; right:0; }
	
	
	.toolbar { position:absolute; top:0; left:0; right:0; height:35px; }
	
	.icon-16 { background-image:url(css/icons-16.png); }
	.icon-32 { background-image:url(css/icons-32.png); }
</style>
<script>
	
	var lastmode = 'details';
	var lasticonsize = 0;
	var lastcheckboxes = false;
	
	function removeIcons(){
		$('ul:first li .icon-16').remove();
		$('ul:first li .icon-32').remove();
		lasticonsize = 0;
	}
	
	function addIcons16(){
		removeIcons();
		$('ul:first li:not(.column-headers)').prepend($('<div>').addClass('icon-16'));
		lasticonsize = 16;
		updateList();
	}
	
	function addIcons32(){
		removeIcons();
		$('ul:first li:not(.column-headers)').prepend($('<div>').addClass('icon-32'));
		lasticonsize = 32;
		updateList();
	}
	
	function updateList(){
		$('ul:first').listview({
			mode: lastmode,
			iconSize: lasticonsize,
			checkboxes: lastcheckboxes
		});
	}
	
	function goDetails(){
		lastmode = 'details';
		$('ul:first').listview('mode', 'details')
	}
	
	function goTile(){
		lastmode = 'tile';
		$('ul:first').listview('mode', 'tile')
	}
	
	function showCheckboxes(show){
		lastcheckboxes = true;
		$('ul:first').listview('checkboxes', show)
	}
	
	function columnHeaders(visible){
		$('ul:first').listview('columnHeadersVisible', visible);
	}
	
	function makeTree(tree){
		$('ul:first').listview('tree', tree);
	}
	
	function init(){

		$('ul:first').listview({ 
			 columns: {'Name': 300, 'Company': 100, 'Address': 300, 'Location': 150 },
			 itemActivate: function(item){ alert("Activate: " + item.text()); },
			 itemMouseEnter: function(item){ document.title = "MouseEnter: " + item.text() },
			 itemMouseLeave: function(item){ document.title = "MouseLeave: " + item.text() },
			 columnResizing: function(index, item){ document.title = "Resizing: " + item.text() },
			 columnResize: function(index, item){ document.title = "Resized: " + item.text() },
			 columnHeaderMouseEnter: function(index, item){ document.title = "Column enter: " + item.text() },
			 columnHeaderMouseLeave: function(index, item){ document.title = "Column leave: " + item.text() },
			 columnSort: function(index, item){ alert("Sorted by " + item.text() + "(" + index + ")") },
			 });
	}
	
	$(function(){		   
		setTimeout('init()', 1);
	});
</script>
</head>

<body>
	<div class="toolbar">
    	<form onsubmit="return false">
        <button onclick="addIcons16();">Icons 16</button>
        <button onclick="addIcons32();">Icons 32</button>
        <button onclick="removeIcons(); updateList();">No Icons</button>
        <div class="separator"></div>
    	<button onclick="goDetails()">Details</button>
        <button onclick="goTile()">Tile</button>
        <div class="separator"></div>
        <button onclick="showCheckboxes(true)">Show checkboxes</button>
        <button onclick="showCheckboxes(false)">Hide checkboxes</button>
		<div class="separator"></div>
		<button onclick="columnHeaders(true)">Show ColumnHeaders</button>
		<button onclick="columnHeaders(false)">Hide ColumnHeaders</button>
		<div class="separator"></div>
		<button onclick="makeTree(true)">Make Tree</button>
        </form>
    </div>
    <ul class="main">
    	<li>
        	<span>John Smith</span>
            <span>EmoTech</span>
            <span>Park Avenue, 456</span>
            <span>Houston, TX</span>
        </li>
        <li>
        	<span>Anna James</span>
            <span>EmoTech </span>
            <span>Park Avenue, 456</span>
            <span>Orlando, FL</span>
        </li>
        <li>
        	<span>Greg Robinson</span>
            <span>Raddison</span>
            <span>Park Avenue, 456</span>
            <span>Seattle, WA</span>
			<ul>
				<li>
		        	<span>Sub-Grace Willson</span>
		            <span>Sub-Enron</span>
		            <span>Sub-Park Avenue, 456</span>
		            <span>Sub-Buffalo, NY</span>
		        </li>
		        <li>
		        	<span>Sub-Tom Robbins</span>
		            <span>Sub-SatCom</span>
		            <span>Sub-Park Avenue, 456</span>
		            <span>Sub-New Jersey</span>
		        </li>
		        <li>
		        	<span>Sub-Daniel Rabbitt</span>
		            <span>ComWorld</span>
		            <span>Park Avenue, 456</span>
		            <span>Chicago</span>
		        </li>
		        <li>
		        	<span>Sub-Amy Johnson</span>
		            <span>ConAn</span>
		            <span>Park Avenue, 456</span>
		            <span>Manhattan, NY</span>
		        </li>
		        <li>
		        	<span>Sub-Jeff Watson</span>
		            <span>Skynet</span>
		            <span>Park Avenue, 456</span>
		            <span>Loren, Ipsum</span>
					<ul>
						<li><span>one</span><span>one left</span></li>
						<li><span>two</span>
						<ul>
								<li><span>2.one</span><span>Something</span></li>
								<li><span>2.two</span><span>Else</span></li>
								<li><span>2.three</span></li>
							</ul>
						</li>
						<li><span>three</span></li>
					</ul>
		        </li>
		        <li>
		        	<span>Sub-Harry Cruise</span>
		            <span>PreCrime</span>
		            <span>Park Avenue, 456</span>
		            <span>Neverland, Ranch</span>
		        </li>
			</ul>
        </li>
        <li>
        	<span>Grace Willson</span>
            <span>Enron</span>
            <span>Park Avenue, 456</span>
            <span>Buffalo, NY</span>
        </li>
        <li>
        	<span>Tom Robbins</span>
            <span>SatCom</span>
            <span>Park Avenue, 456</span>
            <span>New Jersey</span>
        </li>
        <li>
        	<span>Daniel Rabbitt</span>
            <span>ComWorld</span>
            <span>Park Avenue, 456</span>
            <span>Chicago</span>
        </li>
        <li>
        	<span>Amy Johnson</span>
            <span>ConAn</span>
            <span>Park Avenue, 456</span>
            <span>Manhattan, NY</span>
        </li>
        <li>
        	<span>Jeff Watson</span>
            <span>Skynet</span>
            <span>Park Avenue, 456</span>
            <span>Loren, Ipsum</span>
        </li>
        <li>
        	<span>Harry Cruise</span>
            <span>PreCrime</span>
            <span>Park Avenue, 456</span>
            <span>Neverland, Ranch</span>
        </li>
        <li>
        	<span>Jessica Winston</span>
            <span>Hogwarts</span>
            <span>Park Avenue, 456</span>
            <span>Unknown Lake, UK</span>
        </li>
        <li>
        	<span>John Smith</span>
            <span>EmoTech</span>
            <span>Park Avenue, 456</span>
            <span>Houston, TX</span>
        </li>
        <li>
        	<span>Anna James</span>
            <span>EmoTech</span>
            <span>Park Avenue, 456</span>
            <span>Orlando, FL</span>
        </li>
        <li>
        	<span>Greg Robinson</span>
            <span>Raddison</span>
            <span>Park Avenue, 456</span>
            <span>Seattle, WA</span>
        </li>
        <li>
        	<span>Grace Willson</span>
            <span>Enron</span>
            <span>Park Avenue, 456</span>
            <span>Buffalo, NY</span>
        </li>
        <li>
        	<span>Tom Robbins</span>
            <span>SatCom</span>
            <span>Park Avenue, 456</span>
            <span>New Jersey</span>
        </li>
        <li>
        	<span>Daniel Rabbitt</span>
            <span>ComWorld</span>
            <span>Park Avenue, 456</span>
            <span>Chicago</span>
        </li>
        <li>
        	<span>Amy Johnson</span>
            <span>ConAn</span>
            <span>Park Avenue, 456</span>
            <span>Manhattan, NY</span>
        </li>
        <li>
        	<span>Jeff Watson</span>
            <span>Skynet</span>
            <span>Park Avenue, 456</span>
            <span>Loren, Ipsum</span>
        </li>
        <li>
        	<span>Harry Cruise</span>
            <span>PreCrime</span>
            <span>Park Avenue, 456</span>
            <span>Neverland, Ranch</span>
        </li>
        <li>
        	<span>Jessica Winston</span>
            <span>Hogwarts</span>
            <span>Park Avenue, 456</span>
            <span>Unknown Lake, UK</span>
        </li>
        <li>
        	<span>John Smith</span>
            <span>EmoTech</span>
            <span>Park Avenue, 456</span>
            <span>Houston, TX</span>
        </li>
        <li>
        	<span>Anna James</span>
            <span>EmoTech</span>
            <span>Park Avenue, 456</span>
            <span>Orlando, FL</span>
        </li>
        <li>
        	<span>Greg Robinson</span>
            <span>Raddison</span>
            <span>Park Avenue, 456</span>
            <span>Seattle, WA</span>
        </li>
        <li>
        	<span>Grace Willson</span>
            <span>Enron</span>
            <span>Park Avenue, 456</span>
            <span>Buffalo, NY</span>
        </li>
        <li>
        	<span>Tom Robbins</span>
            <span>SatCom</span>
            <span>Park Avenue, 456</span>
            <span>New Jersey</span>
        </li>
        <li>
        	<span>Daniel Rabbitt</span>
            <span>ComWorld</span>
            <span>Park Avenue, 456</span>
            <span>Chicago</span>
        </li>
        <li>
        	<span>Amy Johnson</span>
            <span>ConAn</span>
            <span>Park Avenue, 456</span>
            <span>Manhattan, NY</span>
        </li>
        <li>
        	<span>Jeff Watson</span>
            <span>Skynet</span>
            <span>Park Avenue, 456</span>
            <span>Loren, Ipsum</span>
        </li>
        <li>
        	<span>Harry Cruise</span>
            <span>PreCrime</span>
            <span>Park Avenue, 456</span>
            <span>Neverland, Ranch</span>
        </li>
        <li>
        	<span>Jessica Winston</span>
            <span>Hogwarts</span>
            <span>Park Avenue, 456</span>
            <span>Unknown Lake, UK</span>
        </li>
        <li>
        	<span>John Smith</span>
            <span>EmoTech</span>
            <span>Park Avenue, 456</span>
            <span>Houston, TX</span>
        </li>
        <li>
        	<span>Anna James</span>
            <span>EmoTech</span>
            <span>Park Avenue, 456</span>
            <span>Orlando, FL</span>
        </li>
        <li>
        	<span>Greg Robinson</span>
            <span>Raddison</span>
            <span>Park Avenue, 456</span>
            <span>Seattle, WA</span>
        </li>
        <li>
        	<span>Grace Willson</span>
            <span>Enron</span>
            <span>Park Avenue, 456</span>
            <span>Buffalo, NY</span>
        </li>
        <li>
        	<span>Tom Robbins</span>
            <span>SatCom</span>
            <span>Park Avenue, 456</span>
            <span>New Jersey</span>
        </li>
        <li>
        	<span>Daniel Rabbitt</span>
            <span>ComWorld</span>
            <span>Park Avenue, 456</span>
            <span>Chicago</span>
        </li>
        <li>
        	<span>Amy Johnson</span>
            <span>ConAn</span>
            <span>Park Avenue, 456</span>
            <span>Manhattan, NY</span>
        </li>
        <li>
        	<span>Jeff Watson</span>
            <span>Skynet</span>
            <span>Park Avenue, 456</span>
            <span>Loren, Ipsum</span>
        </li>
        <li>
        	<span>Harry Cruise</span>
            <span>PreCrime</span>
            <span>Park Avenue, 456</span>
            <span>Neverland, Ranch</span>
        </li>
        <li>
        	<span>Jessica Winston</span>
            <span>Hogwarts</span>
            <span>Park Avenue, 456</span>
            <span>Unknown Lake, UK</span>
        </li>
        <li>
        	<span>John Smith</span>
            <span>EmoTech</span>
            <span>Park Avenue, 456</span>
            <span>Houston, TX</span>
        </li>
        <li>
        	<span>Anna James</span>
            <span>EmoTech</span>
            <span>Park Avenue, 456</span>
            <span>Orlando, FL</span>
        </li>
        <li>
        	<span>Greg Robinson</span>
            <span>Raddison</span>
            <span>Park Avenue, 456</span>
            <span>Seattle, WA</span>
        </li>
        <li>
        	<span>Grace Willson</span>
            <span>Enron</span>
            <span>Park Avenue, 456</span>
            <span>Buffalo, NY</span>
        </li>
        <li>
        	<span>Tom Robbins</span>
            <span>SatCom</span>
            <span>Park Avenue, 456</span>
            <span>New Jersey</span>
        </li>
        <li>
        	<span>Daniel Rabbitt</span>
            <span>ComWorld</span>
            <span>Park Avenue, 456</span>
            <span>Chicago</span>
        </li>
        <li>
        	<span>Amy Johnson</span>
            <span>ConAn</span>
            <span>Park Avenue, 456</span>
            <span>Manhattan, NY</span>
        </li>
        <li>
        	<span>Jeff Watson</span>
            <span>Skynet</span>
            <span>Park Avenue, 456</span>
            <span>Loren, Ipsum</span>
        </li>
        <li>
        	<span>Harry Cruise</span>
            <span>PreCrime</span>
            <span>Park Avenue, 456</span>
            <span>Neverland, Ranch</span>
        </li>
        <li>
        	<span>Jessica Winston</span>
            <span>Hogwarts</span>
            <span>Park Avenue, 456</span>
            <span>Unknown Lake, UK</span>
        </li>
        <li>
        	<span>John Smith</span>
            <span>EmoTech</span>
            <span>Park Avenue, 456</span>
            <span>Houston, TX</span>
        </li>
        <li>
        	<span>Anna James</span>
            <span>EmoTech</span>
            <span>Park Avenue, 456</span>
            <span>Orlando, FL</span>
        </li>
        <li>
        	<span>Greg Robinson</span>
            <span>Raddison</span>
            <span>Park Avenue, 456</span>
            <span>Seattle, WA</span>
        </li>
        <li>
        	<span>Grace Willson</span>
            <span>Enron</span>
            <span>Park Avenue, 456</span>
            <span>Buffalo, NY</span>
        </li>
        <li>
        	<span>Tom Robbins</span>
            <span>SatCom</span>
            <span>Park Avenue, 456</span>
            <span>New Jersey</span>
        </li>
        <li>
        	<span>Daniel Rabbitt</span>
            <span>ComWorld</span>
            <span>Park Avenue, 456</span>
            <span>Chicago</span>
        </li>
        <li>
        	<span>Amy Johnson</span>
            <span>ConAn</span>
            <span>Park Avenue, 456</span>
            <span>Manhattan, NY</span>
        </li>
        <li>
        	<span>Jeff Watson</span>
            <span>Skynet</span>
            <span>Park Avenue, 456</span>
            <span>Loren, Ipsum</span>
        </li>
        <li>
        	<span>Harry Cruise</span>
            <span>PreCrime</span>
            <span>Park Avenue, 456</span>
            <span>Neverland, Ranch</span>
        </li>
        <li>
        	<span>Jessica Winston</span>
            <span>Hogwarts</span>
            <span>Park Avenue, 456</span>
            <span>Unknown Lake, UK</span>
        </li>
    </ul>
</body>
</html>
